<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" shadow background-color="red" status-bar left-icon="left" left-text="返回"
			title='新增地址' @clickLeft="goBack"></uni-nav-bar>

		<view class="form">
			<view class="form-item">
				<view class="label">
					<text class="required">*</text>
					地址标签
				</view>
				<input type="text" v-model="form.description" placeholder="请输入地址标签，如：公司、家" />
			</view>

			<view class="form-item">
				<view class="label">
					<text class="required">*</text>
					详细地址
				</view>
				<view class="address-input">
					<input type="text" v-model="form.address" placeholder="点击获取当前位置" disabled />
					<view class="refresh-btn" @tap="getCurrentLocation">
						<text class="refresh-icon">🔄</text>
					</view>
				</view>
			</view>

			<view class="coordinates-box">
				<view class="coordinate">
					<text class="coordinate-label">经度：</text>
					<text class="coordinate-value">{{ form.longitude }}</text>
				</view>
				<view class="coordinate">
					<text class="coordinate-label">纬度：</text>
					<text class="coordinate-value">{{ form.latitude }}</text>
				</view>
			</view>
		</view>

		<view class="submit-btn" @tap="submitForm">
			保存
		</view>
	</view>
</template>

<script>
import QQMapWX from "@/common/qqmap-wx-jssdk.min.js";
import {
	PromotionUserAddressInsert
} from "@/api/promotion";
export default {
	data() {
		return {
			form: {
				description: '',
				address: '',
				longitude: 0,
				latitude: 0,
				openId: this.$store.state.user.openid
			}
		}
	},

	async onLoad(options) {
		await this.getCurrentLocation();
	},

	methods: {
		goBack() {
			uni.navigateBack()
		},
		getCurrentLocation() {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						// 使用腾讯地图SDK进行逆地址解析
						const qqmapsdk = new QQMapWX({
							// key: 'XA3BZ-7NQKA-QHXKW-CMKQJ-O5FWQ-7QFLM' // 使用你的腾讯地图key my
							key: 'SNPBZ-Z62CL-ZYJPM-MTZXE-SON7J-T7BNJ' // 使用你的腾讯地图key red
						});
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: function (addressRes) {
								const address = addressRes.result.address;
								that.form.address = address;
								that.form.latitude = addressRes.result.location.lat;
								that.form.longitude = addressRes.result.location.lng;
							},
							fail: function (err) {
								console.error('逆地址解析失败:', err);
								uni.showToast({
									title: '获取地址失败',
									icon: 'none'
								});
								reject(err);
							}
						});
					},
					fail: function (err) {
						console.error('获取位置失败:', err);
						if (err.errMsg.includes('auth deny')) {
							uni.showModal({
								title: '提示',
								content: '需要您授权位置权限才能获取当前位置',
								confirmText: '去设置',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (settingRes) => {
												if (settingRes.authSetting[
													'scope.userLocation'
												]) {
													that
														.getCurrentLocation();
												}
											}
										});
									}
								}
							});
						} else {
							uni.showToast({
								title: '获取位置失败',
								icon: 'none'
							});
						}
						reject(err);
					}
				});
			});
		},
		submitForm() {
			if (!this.form.description) {
				return uni.showToast({
					title: '请输入地址标签',
					icon: 'none'
				})
			}
			PromotionUserAddressInsert(this.form)
				.then(res => {
					if (res.status == 0) {
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							success: () => {
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							}
						})
					}

				})
				.catch(res => { });



		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 120rpx;
}

.form {
	background: #fff;
	padding: 30rpx;
	margin-top: 20rpx;
	border-radius: 16rpx;
}

.form-item {
	margin-bottom: 40rpx;
}

.label {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
}

.required {
	color: #FC0000;
	margin-right: 8rpx;
}

input {
	border: 1px solid #eee;
	padding: 20rpx;
	font-size: 28rpx;
	border-radius: 12rpx;
	background: #f8f8f8;
}

.address-input {
	display: flex;
	align-items: center;
}

.address-input input {
	flex: 1;
}

.refresh-btn {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 20rpx;
}

.refresh-icon {
	font-size: 40rpx;
}

.coordinates-box {
	background: #f8f8f8;
	padding: 20rpx;
	border-radius: 12rpx;
	margin-top: 30rpx;
}

.coordinate {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.coordinate:last-child {
	margin-bottom: 0;
}

.coordinate-label {
	font-size: 26rpx;
	color: #666;
	width: 80rpx;
}

.coordinate-value {
	font-size: 26rpx;
	color: #333;
}

.submit-btn {
	position: fixed;
	bottom: 40rpx;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(to right, #FF4B4B, #FC0000);
	color: #fff;
	padding: 24rpx;
	border-radius: 45rpx;
	font-size: 32rpx;
	width: 600rpx;
	text-align: center;
	box-shadow: 0 4rpx 16rpx rgba(252, 0, 0, 0.3);
}
</style>